<template lang="html">
  <div class="eg-list" :class="[open ? 'eg-list_open' : 'eg-list_close']">
    <div class="eg-list-hd" data-flex="main-between" @click="toggle">
      <div class="eg-category">{{ title }}</div>
      <div class="eg-categroy-arrow"><i class="iconfont eg-categroy-arrow_icon">&#xe647;</i></div>
    </div>
    <div class="eg-list-bd" :style="{height: height+'rem'}">
      <div v-for="(item, key) in links" data-flex="main-between" class="eg-list-item">
        <router-link :to="item.path" class="eg-list-item-link">{{ item.title }}</router-link>
        <i class="iconfont eg-list-item-icon">&#xe645;</i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'eg-categroy-item',
  data () {
    return {
      open: false,
      height: 0,
    }
  },
  props: {
    title: {
      type: String,
      default: '标题'
    },
    onClick: Function,
    links: Array,
  },
  methods: {
    toggle () {
      this.open = !this.open
      this.height = this.open ? (this.links.length * 1.2) : 0
    }
  }
}
</script>

<style lang="less">

.eg-list {
  margin: 32px 24px;
  background-color: #fff;
  border-radius: 4px;
  &-hd {
    font-size: 32px;
    padding-left: 48px;
    height: 140px;
    line-height: 140px;
    transition: opacity .3s;
  }
  &-bd {
    height: 0;
    overflow: hidden;
    transition: height .2s ease-in;
  }
}
.eg-categroy-arrow{
  width: 100px;
  text-align: center;
}
.eg-categroy-arrow_icon{
  font-size: 30px;
  color:#ccc;
  transform: translate3d(0,0,0);
  transition: transform .3s;
}
.eg-list_open .eg-categroy-arrow_icon{
  transform: rotate(180deg);
}
.eg-list_open .eg-list-hd{
  opacity: .4;
}

.eg-list-item{
  font-size: 28px;
  height: 90px;
  line-height: 90px;
  margin-left: 48px;
  border-bottom: 1Px solid #ddd;
  &-link{
    color:#333;
    display: block;
    width: 100%;
  }
  &-icon{
    color:#ccc;
    padding: 0 30px;
  }
  &:last-child{
    border-bottom: 0;
  }
}
</style>
